// 详情页
$(() => {
  // 获取对应商品的详情数据，并渲染页面
  // 1. 获取商品的id
  let id = sessionStorage.getItem('id')
  // 2. 判断id是否存在
  if (!id || !/^\d+$/.test(id)) {
    layer.msg('非法数据!!', { time: 2000, shade: ['.8', '#ccc'] }, () => {
      location.href = './liebiaoye.html';
    });
  }
  // 3. 根据id获取详情数据
  // 加载层
  let index = layer.load(0, {
    shade: ['.5', '#ccc']
  })
  // 使用自己封装的pAjax 
  fn();
  async function fn() {
    let res = await pAjax({
      url: '../server/detail.php',
      data: { id },
      dataType: 'json',
    })
    // 结构获取详情数据
    let { data } = res;
    // 渲染详情页面中的数据
    $('.description').find('h4').text(data.name);
    $('.souceprice').find('span').text(data.price);
    $('.fr ol').find('li.active').html(data.introduce);
    // 将商品的库存和id 通过标签属性的方式存储起来，在点击的时候方便获取
    $('#num').attr('data-stock', data.stock);
    $('#num').attr('data-id', data.id);
    // 放大镜
    // 获取到商品的所有图片
    let arr = data.imgpath.split('==========');
    // console.log(arr);
    // 渲染中图和大图
    $('.middle>img').prop('src', arr[0]);
    $('.middle>.big>img').prop('src', arr[0]);
    // 渲染小图
    console.log();
    let str = arr.map(v => `<li><img src="${v}"></li>`).join('');
    $('.small ul').html(str);
    // 调用放大镜函数
    enlarge();
    // 渲染结束关闭遮罩层
    layer.close(index);
  }

  // 完成加入购物车
  // 事件委托完成绑定点击事件
  $('.addCart')[0].onclick = (e) => {
    e = e || window.event;
    // 事件委托的判断        
    let that = e.target;
    if ($(that).text() === '+') {  // 判断点击的是不是 + 按钮
      // 将禁用的 - 解除
      $('.reduce').prop('disabled', false);
      let n = $('#num').val();
      let stock = $('#num')[0].dataset.stock;
      n++;
      if (n > stock) {
        n = stock;
        layer.msg('超出库存');
        $(that).prop('disabled', true);
      }
      $('#num').val(n);
    }
    if ($(that).text() === '-') {  // 判断点击的是不是 - 按钮
      // 将禁用的 + 解除
      $('.add').prop('disabled', false);
      let n = $('#num').val();
      n--;
      if (n < 1) {
        n = 1;
        layer.msg('购买数量最少为1');
        $(that).prop('disabled', true);
      }
      $('#num').val(n);
    }
    if ($(that).text() === '加入购物车') {
      // 通过cookie获取用户信息
      var username = getCookie('username');
      if (!username) {
        sessionStorage.setItem('url', location.href);
        return layer.msg('请先登录', { time: 1000 }, () => { location.href = './denglu.html' });
      }
      // 将商品id 加入购物车
      // 获取商品的id 和 加入购物车商品的数据量
      let id = $('#num')[0].dataset.id;
      let n = $('#num').val();
      let car = { username, id, n } // 组装这个 购物车数据
      // 获取 本地购物车数据，进行判断
      let carData = localStorage.getItem('data');
      if (!carData || !carData.length) {  // 本地购物车没有数据
        localStorage.setItem('data', JSON.stringify([car]));
        layer.msg('加入购物车成功');
        return;
      }
      // 如果 本地购物车 有数据，转为数组
      let carData1 = JSON.parse(carData);
      // 判断 本地购物车 之前是否有添加这个商品
      let res = carData1.findIndex(v => v.username === username && v.id === id);
      if(res === -1){  // 说明之前没有添加这个商品到购物车,则将当前的这个商品数据添加到本地购物车
        carData1.push(car);
        layer.msg('加入购物车成功');
        localStorage.setItem('data',JSON.stringify(carData1));
        return;
      }
      // 代码执行到此处，说明 之前已经将这个商品 添加过本地购物车
      // 找到之前添加的 购物车数据
      let car1 = carData1.find(v=>v.username === username && v.id === id);
      // 将 当前 的购物数添加到购物车中
      let num = (car1.n-0) + (n-0);      
      if(num > $('#num')[0].dataset.stock-0) return layer.msg('超出库存量');
      // 将购物的数量 写入数组中的对象中，然后将数据转为json存入购物车
      car1.n = num;
      layer.msg('加入购物车成功');
      localStorage.setItem('data',JSON.stringify(carData1));

    }  
    if ($(that).text() === '进入购物车') {
       // 通过cookie获取用户信息
      var username = getCookie('username');            
      if (!username) {
        sessionStorage.setItem('url', location.href);
        layer.msg('请先登录', { time: 1000 }, () => { location.href = './denglu.html' });
      }else{         
        location.href = './cart.html';      
      }
      return false; // 阻止默认跳转
    }
  }

  $('#num').blur(function () {  // 购买数量的校验
    let n = parseInt($(this).val());
    let stock = parseInt($(this)[0].dataset.stock);
    if ( n < 1 || n > stock) {
      layer.msg('购买数量错误');
      $(this).val(1);
    }
  })



})

/*
  购物车数据存储，使用localSotrage完成 （只能存储字符串）
    数组的方式存储,数组中可以有多个对象，每一个对象表示一个商品的购物车数据
      对象中的属性存储，用户名，商品id，数量
        [
          {username:admin,id:1,n:5},
          {username:leon,id:1,n:5},
        ]
    将数组转为json格式存储到localStorage中
*/





let index = layer.load(0,{
  shade:['.5','#ccc']
})

// jq-ajax请求北京的景点数据
$.ajax({
  url:'../server/scenics.php',
  data:{pid:2},
  dataType:'json',
  success(res){
    // console.log(res);
    // 结构获取数据
    let {data} = res;
    console.log(data);
    let str = '';
    data.forEach(item=>{      
      str += `
      <li>
      <img src="${item.imgpath.split('==========')[0]}" alt="">
       <section>
            <p>${item.name}</p>
            <p>${item.introduce}</p>
            <div>
               
                <span>2021.11成交</span>
            </div>
       </section>
    </li>
      `
    })
    // 将拼接的数据渲染到页面
    $('.bans').html(str);
  }
})